<template>
  <div class="co_video">
    <div class="co_video_box">
      <img
        :src="co_video_fengmian"
        alt=""
      >
      <div
        class="co_video_index"
        v-if="covideo_status"
      >
        <video
          v-if="co_video_content !== ''"
          id="my-video"
          ref="vid"
          class="video-js vjs-default-skin"
          controls
          preload="auto"
          :poster="co_video_fengmian"
          style="width: 100%; height: 100%; object-fit: fill"
          webkit-playsinline
          playsinline
          x5-playsinline
          x-webkit-airplay=”allow”
        >
          <source
            :src="co_video_content"
            type="video/mp4"
          >
        </video>
      </div>
    </div>
    <!-- <div class="co_video_index" v-if="!covideo_status">
			<img :src="co_video_fengmian" alt="">
		</div> -->
    <div class="co_video_title">
      <div>{{co_video_title}}</div>
      <div>{{co_video_number}}次学习</div>
    </div>

    <div class="co_video_list">
      <div class="co_video_list_title">课程列表</div>
      <div
        class="co_video_list_list"
        @click="co_video_Comment_open"
      >更新至第{{co_video_chapter}}章
        <img
          src="http://o6wndwjxn.qnssl.com/7c452201810231644027976.png"
          alt=""
        >
      </div>
    </div>
    <div class="co_video_list_box">
      <div :style="'width:'+ co_video_chapter*150 +'px;display:flex'">
        <div
          class="co_videw_lb_box"
          v-for="(item,index) in co_video_Comment"
          :key='index'
          @click="co_video_lb_click(index,item.chapter_id)"
          :class='index == cvlbselect?"cvlbselect":""'
        >
          <p
            v-if="item.title.length<=10"
            style="line-height: 32px;text-align: center;"
          >{{item.title}}</p>
          <p
            v-else
            style="text-align: left;"
          >{{item.title}}</p>
        </div>
      </div>
    </div>
    <!-- <div
      class="VideoAudio_box"
      @click="Introduce_status_click"
    >
      <div>查看课程简介</div>
      <img
        src="http://o6wndwjxn.qnssl.com/7c452201810231644027976.png"
        alt=""
      >
    </div> -->
    <!-- <div class="co_video_Recommend">
      <div class="co_video_Recommend_title">猜你喜欢</div>
      <Recommend :type='co_video_Recommend_list'></Recommend>
    </div> -->
    <div style="height: 50px;"></div>
    <div class="co_video_bottom">
      <Button
        css='3'
        v-if="Details"
        :Details="Details"
        :is_gz="Details.is_gz"
        :type="co_video_Button"
        @Button_box_show='Introduce_status_click'
        @ButtonComment='ButtonComment'
        @ButtonCollection='ButtonCollection'
        @ButtonShare='ButtonShare'
      ></Button>
    </div>

    <!-- <div
      class="Catalog"
      v-show="Catalog_status"
      @click.self="Popup_close"
    >
    </div> -->
    <Catalog
      v-show="Catalog_status"
      :type='co_video_Catalog'
      @CatalogClose='CatalogClose'
      @CatalogInput='CatalogInput'
    ></Catalog>
    <div
      class="Comment"
      v-show="Comment_status"
      @click.self="Popup_close"
    >
      <Comment
        :type='co_video_Comment'
        @CommentStatus='CommentStatus'
        @CommentZid='CommentZid'
        @PurStatus='PurStatus'
      ></Comment>
    </div>
    <div
      class="Introduce"
      v-show="Introduce_status"
      @click.self="Popup_close"
    >
      <Introduce
        :type='co_video_Introduce'
        @IntroduceClose='IntroduceClose'
      ></Introduce>
    </div>
    <div
      class="Purchase"
      v-show="Purchase_status"
    >
      <Purchase
        :type='cid'
        @PurchaseClose='PurchaseClose'
      ></Purchase>
    </div>

    <div
      class="Buttonshare_box"
      v-show="Buttonshare_box"
      @click="Buttonshare_box_click"
    >
      <img
        src="http://o6wndwjxn.qnssl.com/60a3e201812271357334941.png"
        alt=""
      >
      <div>点击分享给好友或朋友圈!邀请好友一起听课</div>
    </div>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
import {
  mapState
} from 'vuex'
import {
  comment_list,
  class_list,
  button_gochapter,
  go_content,
  school_number,
  search_popularity,
  user_ke,
  collection_onclick,
  dqtimes
} from '@/api/co_video'
import { cnreading } from '@/api/assemble'
import Catalog from '@/components/curriculum/Catalog.vue'
import Comment from '@/components/curriculum/Comment.vue'
import Introduce from '@/components/curriculum/Introduce.vue'
import Button from '@/components/curriculum/Button.vue'
import VideoAudio from '@/components/curriculum/VideoAudio.vue'
import Recommend from '@/components/curriculum/Recommend.vue'
import Purchase from '@/components/curriculum/Purchase.vue'
let palyer
export default {
  components: {
    Catalog,
    Comment,
    Introduce,
    Button,
    VideoAudio,
    Recommend,
    Purchase
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      Details: '',
      covideo_status: true,
      cid: '',
      zid: '',
      stime: 0,
      Buttonshare_box: false,
      Purchase_status: false,
      Catalog_status: false,
      Comment_status: false,
      Introduce_status: false,
      co_video_Catalog: [],
      co_video_Comment: [],
      co_video_Introduce: '',
      co_video_Button: true,
      co_video_fengmian: '',
      co_video_content: '',
      co_video_title: '',
      co_video_number: '',
      co_video_chapter: 0,
      cvlbselect: 0,
      co_video_Recommend_list: [],
      co_video_status: false
    }
  },
  destroyed () {
    let requery = {
      app_id: this.app_id,
      user_id: this.user_id,
      member_id: this.user_id,
      curriculum_id: this.co_curriculum_id,
      chapter_id: this.zid,
      time: this.videoEnd,
      stime: this.stime,
      etime: Date.parse(new Date()) / 1000
    }
    // console.log('离开请求',requery)
    dqtimes(requery).then(res => { })
    cnreading(requery).then(res => {
      console.log(res)
    })
  },
  created () {
    // console.log('进入方式',this.$route.query.status)
    this.cvlbselect = this.$route.query.c
    this.cid = this.$route.query.curriculum_id
    this.zid = this.$route.query.chapter_id
    this.getDetails()
    this.getCatalog()
    this.getComment()
    this.getStudy()
    this.getRecommend()
    this.getCollection()
    this.stime = Date.parse(new Date()) / 1000
  },
  mounted () {
  },

  methods: {
    Buttonshare_box_click () {
      this.Buttonshare_box = false
    },
    ButtonShare () {
      this.Buttonshare_box = true
    },
    Introduce_status_click () {
      this.Introduce_status = true
    },
    ButtonCollection (a) {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        curriculum_id: this.cid
      }
      collection_onclick(requery).then(res => {
        let {
          code
        } = res.data
        if (code === 200) {
          if (this.Details.is_gz == 0) {
            this.Details.is_gz = 1
          } else {
            this.Details.is_gz = 0
          }
          if (a) {
            this.co_video_Button = true
          } else {
            this.co_video_Button = false
          }
        }
      })
    },
    getCollection () {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        type: 3
      }
      user_ke(requery).then(res => {
        let {
          data
        } = res.data
        // console.log('收藏列表',data)
        for (var i = 0; i < data.length; i++) {
          if (data[i].curriculum_id == this.cid) {
            this.co_video_Button = false
          }
        }
      })
    },
    getRecommend () {
      let requery = {
        app_id: this.app_id
      }
      search_popularity(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          this.co_video_Recommend_list = data
        }
      })
    },
    co_video_lb_click (e, id) {
      this.zid = id
      this.cvlbselect = e
      for (var i = 0; i < this.co_video_Comment.length; i++) {
        this.co_video_Comment[i].status = false
        this.co_video_Comment[e].status = true
      }
      var videoPlayer = this.$refs.vid
      if (typeof (videoPlayer) !== 'undefined') {
        this.covideo_status = false
      }
      this.getDetails()
    },
    PurStatus () {
      this.Purchase_status = true
    },
    getDetails () {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        curriculum_id: this.cid,
        chapter_id: this.zid
      }
      button_gochapter(requery).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let {
          code,
          data
        } = res.data

        if (code == 200) {
          this.Details = res.data.data
          this.covideo_status = true
          this.co_video_Introduce = data.chapter_introduction
          this.co_video_fengmian = data.cover
          this.co_video_content = data.content
          this.co_video_title = data.title
          setTimeout(() => {
            this.$nextTick(() => {
              if (data.time_list !== null) {
                this.time_list = data.time_list
                this.jiazai(data.time_list.time)
              } else {
                this.jiazai()
              }
            })
          }, 200)
        } else {
          console.log(this.$route)
          this.Purchase_status = true
        }
      })
    },
    getStudy () {
      let requery = {
        app_id: this.app_id,
        curriculum_id: this.cid
      }
      school_number(requery).then(res => {
        let {
          code,
          data
        } = res.data
        // console.log(data)
        if (code == 200) {
          this.co_video_number = data
        }
      })
    },
    jiazai (time) {
      let that = this
      palyer = videojs(this.$refs.vid, {
        featuresVolumeControl: true,
        language: 'zh-CN',
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: true
      }, function onPlayerReady () {
      })
      // palyer.on('loadedmetadata', function () {
      //   if (time) {
      //     palyer.currentTime(parseInt(60))
      //   }
      // })
      let abc = 1
      palyer.on('timeupdate', function () {
        that.videoEnd = Math.floor(palyer.currentTime())
        if (palyer.currentTime() > 0 && palyer.currentTime() < 1) {
          if (time) {
            if (abc === 1) {
              palyer.currentTime(that.time_list.time)
              abc = 2
            }
          }
        }
      })
      palyer.on('canplay', function () {
        if (palyer.currentTime() > 0 && palyer.currentTime() < 1) {
          if (time) {
            palyer.currentTime(that.time_list.time)
          }
        }
      })
      if (time) {
        palyer.currentTime(that.time_list.time)
      }

      if (time) {
        // document.getElementById('my-video_html5_api').currentTime = that.time_list.time
      }
      palyer.on('play', function () {
        if (that.$store.state.audio.audioplayer !== '') {
          that.$store.state.audio.audioplayer.pause()
        }
      })
      that.$nextTick(() => {
        palyer.play()
      })
    },
    kuaij () {
      palyer.currentTime(180)
      palyer.play()
      document.getElementById('kuaij').click()
    },
    co_video_Comment_open () {
      this.Comment_status = true
    },
    PurchaseClose () {
      this.Popup_close()
    },
    ButtonComment () {
      this.Catalog_status = true
    },
    IntroduceClose () {
      this.Popup_close()
    },
    CatalogInput (e) {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        content: e,
        curriculum_id: this.cid
      }
      go_content(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          this.getCatalog()
        }
      })
    },
    CatalogClose () {
      this.Popup_close()
    },
    CommentZid (e) {
      this.co_video_lb_click(e[0], e[1])
    },
    CommentStatus () {
      this.Popup_close()
    },
    getCatalog () {
      let requery = {
        app_id: this.app_id,
        curriculum_id: this.cid
      }
      comment_list(requery).then(res => {
        let {
          code,
          data
        } = res.data
        // console.log('全部评论',data)
        if (code == 200) {
          this.co_video_Catalog = data
        }
      })
    },
    getComment () {
      let requery = {
        app_id: this.app_id,
        curriculum_id: this.cid
      }
      class_list(requery).then(res => {
        // console.log('章节列表',res)
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          let that = this
          // console.log('课程列表',data)
          for (var i = 0; i < data.length; i++) {
            data[i].status = false
            if (this.co_video_status) {
              data[i].audition = 1
            }
            if (data[i].chapter_id == this.zid) {
              data[i].status = true
              that.cvlbselect = i
            }
          }
          this.co_video_chapter = data.length
          this.co_video_Comment = data
          // console.log('组装数组',this.co_video_Comment)
        }
      })
    },
    Popup_close () {
      this.Catalog_status = false
      this.Comment_status = false
      this.Introduce_status = false
      this.Purchase_status = false
    }
  }
}
</script>

<style>
.co_video_box {
  width: 100vw;
  height: 230px;
  overflow: hidden;
  position: relative;
}
.co_video_box > img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Buttonshare_box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 500;
  overflow: hidden;
  text-align: center;
}
.Buttonshare_box > img {
  width: 57px;
  height: 203px;
  margin-top: 15px;
  margin-left: calc(100vw - 100px);
  margin-right: 43px;
}
.Buttonshare_box > div {
  display: inline-block;
  max-width: 90vw;
  padding: 15px 25px;
  font-size: 13px;
  color: white;
  background: #DA4131;
  border-radius: 500px;
  margin-top: 15px;
}

.co_video_Recommend_title {
  width: 100%;
  height: 55px;
  line-height: 55px;
  font-size: 16px;
  color: #1a1a1a;
  font-weight: bold;
}

.co_video {
  width: 100vw;
  overflow: hidden;
}

.Catalog,
.Comment,
.Introduce,
.Purchase {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.co_video_bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 50px;
  background: white;
  border-top: 1px solid #eeeeee;
}

.co_video_index {
  height: 230px;
}

.vjs-big-play-button {
  left: 50% !important;
  top: 50% !important;
  margin-left: -8%;
  margin-top: -10%;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  line-height: 55px !important;
}

.video-js .vjs-big-play-button {
  font-size: 2.5em;
  line-height: 2.3em;
  height: 2.5em;
  width: 2.5em;
  -webkit-border-radius: 2.5em;
  -moz-border-radius: 2.5em;
  border-radius: 2.5em;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  border-width: 0.15em;
}

.vjs-big-play-button .vjs-icon-placeholder {
  font-size: 1.63em;
}

.vjs-loading-spinner {
  font-size: 2.5em;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  margin-top: -1em;
  margin-left: -1.5em;
}

.video-js.vjs-playing .vjs-tech {
  pointer-events: auto !important;
}

.video-js .vjs-time-control {
  display: block;
}

.video-js .vjs-remaining-time {
  display: none;
}

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}

.vjs-poster {
  background-size: cover !important;
}

.co_video_title {
  border-bottom: 10px solid #f0f0f0;
}

.co_video_title > div:nth-child(1) {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: bold;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 20px;
}

.co_video_title > div:nth-child(1) p {
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.co_video_title > div:nth-child(2) {
  font-size: 12px;
  color: #999999;
  margin: 15px 0 15px 20px;
}

.co_video_list {
  width: 90%;
  margin: 0 5%;
  height: 60px;
  line-height: 60px;
  display: flex;
}

.co_video_list > div {
  flex: 1;
}

.co_video_list_title {
  font-size: 16px;
  color: #1a1a1a;
  font-weight: bold;
}

.co_video_list_list {
  text-align: right;
  font-size: 12px;
  color: #999999;
  padding-right: 15px;
  position: relative;
}

.co_video_list_list > img {
  position: absolute;
  right: 0;
  top: 24px;
  height: 12px;
}

.co_video_list_box {
  overflow-x: scroll;
  overflow-y: hidden;
}

.co_videw_lb_box {
  width: 150px;
  height: 62px;
  display: inline-block;
  overflow: hidden;
  margin: 0px -5px 20px 20px;
  border-radius: 4px;
  padding: 14px 12px;
  background: #f6f6f6;
}

.co_videw_lb_box > p {
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
  color: #333;
}

.cvlbselect {
  border: 1px solid #DA4131;
  background: transparent;
}

.cvlbselect > p {
  color: #DA4131;
}

.VideoAudio_box,
.co_video_Recommend {
  width: 90%;
  margin: 0 5%;
  position: relative;
}

.VideoAudio_box > div {
  border: 1px solid #eeeeee;
  border-left: none;
  border-right: none;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #1a1a1a;
  font-weight: bold;
}

.VideoAudio_box > img {
  position: absolute;
  right: 0;
  top: 19px;
  height: 15px;
}
</style>
